const colors = require("tailwindcss/colors");

module.exports = {
  darkMode: 'class',
  content: ["./app/**/*.html.erb", "./app/**/*.bs.js", "./app/**/*.jsx", "config/locales/*.yml"],
  safelist: [
    {
      pattern: /bg-(red|yellow|orange|green|blue|primary|focusColor|gray)-(50|100|200|300|400|500|600|700|800|900)/,
      variants: ['hover', 'focus'],
    }
  ],
  theme: {
    colors: {
      transparent: "transparent",
      current: "currentColor",
      black: 'rgb(var(--color-black) / <alpha-value>)',
      white: 'rgb(var(--color-white) / <alpha-value>)',
      red: {
        50: 'rgb(var(--color-red-50) / <alpha-value>)',
        100: 'rgb(var(--color-red-100) / <alpha-value>)',
        200: 'rgb(var(--color-red-200) / <alpha-value>)',
        300: 'rgb(var(--color-red-300) / <alpha-value>)',
        400: 'rgb(var(--color-red-400) / <alpha-value>)',
        500: 'rgb(var(--color-red-500) / <alpha-value>)',
        600: 'rgb(var(--color-red-600) / <alpha-value>)',
        700: 'rgb(var(--color-red-700) / <alpha-value>)',
        800: 'rgb(var(--color-red-800) / <alpha-value>)',
        900: 'rgb(var(--color-red-900) / <alpha-value>)',
        950: 'rgb(var(--color-red-950) / <alpha-value>)',
      },
      yellow: {
        50: 'rgb(var(--color-yellow-50) / <alpha-value>)',
        100: 'rgb(var(--color-yellow-100) / <alpha-value>)',
        200: 'rgb(var(--color-yellow-200) / <alpha-value>)',
        300: 'rgb(var(--color-yellow-300) / <alpha-value>)',
        400: 'rgb(var(--color-yellow-400) / <alpha-value>)',
        500: 'rgb(var(--color-yellow-500) / <alpha-value>)',
        600: 'rgb(var(--color-yellow-600) / <alpha-value>)',
        700: 'rgb(var(--color-yellow-700) / <alpha-value>)',
        800: 'rgb(var(--color-yellow-800) / <alpha-value>)',
        900: 'rgb(var(--color-yellow-900) / <alpha-value>)',
        950: 'rgb(var(--color-yellow-950) / <alpha-value>)',
      },
      orange: {
        50: 'rgb(var(--color-orange-50) / <alpha-value>)',
        100: 'rgb(var(--color-orange-100) / <alpha-value>)',
        200: 'rgb(var(--color-orange-200) / <alpha-value>)',
        300: 'rgb(var(--color-orange-300) / <alpha-value>)',
        400: 'rgb(var(--color-orange-400) / <alpha-value>)',
        500: 'rgb(var(--color-orange-500) / <alpha-value>)',
        600: 'rgb(var(--color-orange-600) / <alpha-value>)',
        700: 'rgb(var(--color-orange-700) / <alpha-value>)',
        800: 'rgb(var(--color-orange-800) / <alpha-value>)',
        900: 'rgb(var(--color-orange-900) / <alpha-value>)',
        950: 'rgb(var(--color-orange-950) / <alpha-value>)',
      },
      blue: {
        50: 'rgb(var(--color-blue-50) / <alpha-value>)',
        100: 'rgb(var(--color-blue-100) / <alpha-value>)',
        200: 'rgb(var(--color-blue-200) / <alpha-value>)',
        300: 'rgb(var(--color-blue-300) / <alpha-value>)',
        400: 'rgb(var(--color-blue-400) / <alpha-value>)',
        500: 'rgb(var(--color-blue-500) / <alpha-value>)',
        600: 'rgb(var(--color-blue-600) / <alpha-value>)',
        700: 'rgb(var(--color-blue-700) / <alpha-value>)',
        800: 'rgb(var(--color-blue-800) / <alpha-value>)',
        900: 'rgb(var(--color-blue-900) / <alpha-value>)',
        950: 'rgb(var(--color-blue-950) / <alpha-value>)',
      },
      green: {
        50: 'rgb(var(--color-green-50) / <alpha-value>)',
        100: 'rgb(var(--color-green-100) / <alpha-value>)',
        200: 'rgb(var(--color-green-200) / <alpha-value>)',
        300: 'rgb(var(--color-green-300) / <alpha-value>)',
        400: 'rgb(var(--color-green-400) / <alpha-value>)',
        500: 'rgb(var(--color-green-500) / <alpha-value>)',
        600: 'rgb(var(--color-green-600) / <alpha-value>)',
        700: 'rgb(var(--color-green-700) / <alpha-value>)',
        800: 'rgb(var(--color-green-800) / <alpha-value>)',
        900: 'rgb(var(--color-green-900) / <alpha-value>)',
        950: 'rgb(var(--color-green-950) / <alpha-value>)',
      },
      primary: {
        50: 'rgb(var(--color-primary-50) / <alpha-value>)',
        100: 'rgb(var(--color-primary-100) / <alpha-value>)',
        200: 'rgb(var(--color-primary-200) / <alpha-value>)',
        300: 'rgb(var(--color-primary-300) / <alpha-value>)',
        400: 'rgb(var(--color-primary-400) / <alpha-value>)',
        500: 'rgb(var(--color-primary-500) / <alpha-value>)',
        600: 'rgb(var(--color-primary-600) / <alpha-value>)',
        700: 'rgb(var(--color-primary-700) / <alpha-value>)',
        800: 'rgb(var(--color-primary-800) / <alpha-value>)',
        900: 'rgb(var(--color-primary-900) / <alpha-value>)',
        950: 'rgb(var(--color-primary-950) / <alpha-value>)',
      },
      gray: {
        50: 'rgb(var(--color-gray-50) / <alpha-value>)',
        100: 'rgb(var(--color-gray-100) / <alpha-value>)',
        200: 'rgb(var(--color-gray-200) / <alpha-value>)',
        300: 'rgb(var(--color-gray-300) / <alpha-value>)',
        400: 'rgb(var(--color-gray-400) / <alpha-value>)',
        500: 'rgb(var(--color-gray-500) / <alpha-value>)',
        600: 'rgb(var(--color-gray-600) / <alpha-value>)',
        700: 'rgb(var(--color-gray-700) / <alpha-value>)',
        800: 'rgb(var(--color-gray-800) / <alpha-value>)',
        900: 'rgb(var(--color-gray-900) / <alpha-value>)',
        950: 'rgb(var(--color-gray-950) / <alpha-value>)',
      },
      focusColor: {
        50: 'rgb(var(--color-focusColor-50) / <alpha-value>)',
        100: 'rgb(var(--color-focusColor-100) / <alpha-value>)',
        200: 'rgb(var(--color-focusColor-200) / <alpha-value>)',
        300: 'rgb(var(--color-focusColor-300) / <alpha-value>)',
        400: 'rgb(var(--color-focusColor-400) / <alpha-value>)',
        500: 'rgb(var(--color-focusColor-500) / <alpha-value>)',
        600: 'rgb(var(--color-focusColor-600) / <alpha-value>)',
        700: 'rgb(var(--color-focusColor-700) / <alpha-value>)',
        800: 'rgb(var(--color-focusColor-800) / <alpha-value>)',
        900: 'rgb(var(--color-focusColor-900) / <alpha-value>)',
        950: 'rgb(var(--color-focusColor-950) / <alpha-value>)',
      },
    },
    extend: {
      fontFamily: {
        sans: "var(--font-family-sans)",
      },
      spacing: {
        13: "3.25rem",
        15: "3.75rem",
        17: "4.25rem",
        18: "4.5rem",
        19: "4.75rem",
        21: "5.25rem",
        22: "5.5rem",
        23: "5.75rem",
        25: "6.25rem",
        26: "6.5rem",
        27: "6.75rem",
        29: "7.25rem",
        30: "7.5rem",
        31: "7.75rem",
        33: "8.25rem",
        34: "8.5rem",
        35: "8.75rem",
        37: "9.25rem",
        38: "9.5rem",
        39: "9.75rem",
        41: "10.25rem",
        42: "10.5rem",
        43: "10.75rem",
        45: "11.25rem",
        46: "11.5rem",
        47: "11.75rem",
        49: "12.25rem",
        50: "12.5rem",
        "1/12": "8.333333%",
        "1/6": "16.666667%",
        "1/5": "20%",
        "1/4": "25%",
        "1/3": "33.333333%",
        "2/5": "40%",
        "1/2": "50%",
        "3/5": "60%",
        "2/3": "66.666667%",
        "3/4": "75%",
        "4/5": "80%",
        "5/6": "83.333333%",
      },
      borderWidth: {
        3: "3px",
        5: "5px",
        6: "6px",
      },
      fontSize: {
        tiny: ".625rem",
      },
      boxShadow: {
        outline: "0 0 0 2px rgba(96, 37, 192, 0.4)",
      },
      screens: {
        "2xl": "1824px",
      },
    },
  },
};
